<template>
  <div>
    <div class="titletopXX">
      <van-nav-bar
        title="预约信息"
        left-arrow
        @click-left="goHome"
        :fixed="true"
      >
        <!-- <template #left>
          <van-icon color="#606266" name="wap-home" size="30" />
        </template> -->
      </van-nav-bar>
    </div>
    <div class="ulbox">
      <div class="topXX">
        <div class="XX">
          <div class="imgxx" style="position: relative; width: 100%">
            <van-image
              style="
                position: absolute;
                left: 50%;
                top: 0;
                transform: translate(-50%, 0);
              "
              radius="4"
              width="90"
              height="90"
              :src="qrCodeUrl"
              mode=""
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
          <div
            class="WZ_size_14 paddingTOP10"
            style="color: #000; font-weight: 700; text-align: center"
          >
            <span :style="TSxx == '订单生成失效' ? 'color:red' : ''">
              {{ TSxx }}</span
            >
          </div>
        </div>
      </div>
      <div class="LBul">
        <div class="LBli" style="display: flex; align-items: center">
          <div class="">
            <van-icon size="30" name="location" />
          </div>
          <div class="WZ_size_14 marginLeft5">
            {{ orderLocation }}
          </div>
        </div>
        <van-divider
          :style="{
            borderColor: '#999',
            margin: '15px 0',
          }"
        >
        </van-divider>
        <div
          class="LBli"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="WZ_size_12">预约人</div>
          <div class="WZ_size_12">
            {{ name }}
          </div>
        </div>
        <van-divider
          :style="{
            borderColor: '#999',
            margin: '15px 0',
          }"
        >
        </van-divider>
        <div
          class="LBli"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="WZ_size_12" style="width: 100px">预约项目</div>
          <div class="WZ_size_12" style="display: flex; align-items: center">
            <div class="">
              {{ YYxx.orderProject }}
              <span class="" v-if="YYxx.orderSubType != ''">
                --({{ YYxx.orderSubType }})
              </span>
            </div>
          </div>
        </div>
        <van-divider
          :style="{
            borderColor: '#999',
            margin: '15px 0',
          }"
        >
        </van-divider>
        <div
          class="LBli"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="WZ_size_12">下单时间</div>
          <div class="WZ_size_12">
            {{ YYxx.orderCreationTime }}
          </div>
        </div>
        <van-divider
          v-if="YYxx.estimateArrivalTime != ''"
          :style="{
            borderColor: '#999',
            margin: '15px 0',
          }"
        >
        </van-divider>
        <div
          v-if="YYxx.estimateArrivalTime != ''"
          class="LBli"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div
            class="WZ_size_12"
            v-if="YYxx.estimateArrivalTimeTitle != undefined"
          >
            {{ YYxx.estimateArrivalTimeTitle }}
          </div>
          <div class="WZ_size_12" v-else>预计服务时间</div>
          <div class="WZ_size_12">
            {{ YYxx.estimateArrivalTime }}
          </div>
        </div>
        <van-divider
          :style="{
            borderColor: '#999',
            margin: '15px 0',
          }"
        >
        </van-divider>
        <div
          v-if="YYxx.goodSumPrice != '' || YYxx.estimateSumPrice != ''"
          class="LBli"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="WZ_size_12">预估费用</div>
          <div class="WZ_size_12">
            <div class="" v-if="YYxx.goodSumPrice != ''">
              {{ YYxx.goodSumPrice }}元
            </div>
            <div v-else>
              {{ YYxx.estimateSumPrice }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderDetailList } from "@/api/realAssets/icsharedstation/DD/index";
import QRCode from "qrcode";
import { Toast } from "vant";
import { getmoreRoute } from "../common/moreRouteList";
import { getorder } from "../common/DDXX";
export default {
  data() {
    return {
      decodedString: {},
      orderLocation: "",
      TSxx: "二维码生成中",
      qrCodeUrl: "",
      YYxx: {
        siteId: "", //
        orderNumber: "", //预约单号
        userName: "", //用户名称
        mobile: "", //手机号
        orderProject: "", //预约项目
        orderProjectType: "", //0:非健康   1:健康  (区分健康自测类型与其他类型)
        orderCreationTime: "", //下单时间
        estimateArrivalTime: "", //预计上门时间
        estimateArrivalTimeTitle: "",
        estimateSumPrice: "", //预估费用
        orderSubType: "", //预约类型
        serviceDescription: "", //服务介绍
        orderLocation: "", //预约地址(非空展示)
        serviceTip: "", //温馨提示(非空展示)
        goodSumPrice: "", //总价
        serviceTitleList: [], //服务标题
        goodList: [], //商品列表
      },
      name: "",
    };
  },
  created() {
    this.decodedString = JSON.parse(
      decodeURIComponent(getorder().replace(/%25/g, "%"))
    );
  },
  mounted() {
    this.getods();
  },
  methods: {
    goHome() {
      this.$router.go(-1);
    },
    getods() {
      var receivedArray = this.decodedString;
      this.YYxx.orderNumber = receivedArray.orderNumber; //预约单号
      if (receivedArray.orderLocation == "") {
        this.YYxx.orderLocation =
          JSON.parse(getmoreRoute())[0].postName + "员工驿站";
        this.orderLocation =
          JSON.parse(getmoreRoute())[0].postName + "员工驿站";
      } else {
        this.YYxx.orderLocation = receivedArray.orderLocation;
        this.orderLocation = receivedArray.orderLocation;
      }
      this.YYxx.estimateArrivalTimeTitle =
        receivedArray.estimateArrivalTimeTitle; //人员姓名
      this.YYxx.siteId = receivedArray.siteId;
      this.name = receivedArray.name; //人员姓名
      this.YYxx.userName = receivedArray.userName; //人员姓名
      this.YYxx.mobile = receivedArray.mobile; //手机号
      this.YYxx.orderProject = receivedArray.orderProject; //预约的项目
      this.YYxx.orderProjectType = receivedArray.orderProjectType; //0:非健康   1:健康  (区分健康自测类型与其他类型)
      this.YYxx.orderCreationTime = receivedArray.orderCreationTime; //下单时间
      this.YYxx.estimateArrivalTime = receivedArray.estimateArrivalTime; //预计上门时间
      this.YYxx.estimateSumPrice = receivedArray.estimateSumPrice; //预估费用
      this.YYxx.orderSubType = receivedArray.orderSubType; //预约类型
      this.YYxx.serviceDescription = receivedArray.serviceDescription; //服务介绍
      //this.YYxx.orderLocation = receivedArray.orderLocation //预约地址(非空展示)
      this.YYxx.serviceTip = receivedArray.serviceTip; //温馨提示(非空展示)
      this.YYxx.goodSumPrice = receivedArray.goodSumPrice; //总价
      this.YYxx.serviceTitleList = receivedArray.serviceTitleList; //服务标题
      this.YYxx.goodList = receivedArray.goodList; //商品列表
      setTimeout(() => {
        this.getid();
      }, 3000);
    },
    getid() {
      let obj = {
        orderNumber: this.YYxx.orderNumber,
        postId: JSON.parse(localStorage.getItem("siteData")).postId,
        siteId: this.YYxx.siteId,
      };

      getOrderDetailList(obj).then((res) => {
        if (res.resultMessage == "SUCCESS" && res.resultCode == 1) {
          //  console.log(res);
          this.generateQRCode(res.data);
          this.TSxx = "信息已生成";
        } else {
          this.TSxx = "订单生成失效";
          Toast.fail("二维码生成失败");
        }
      });
    },
    async generateQRCode(val) {
      console.log(val.id);
      try {
        const url = await QRCode.toDataURL(val.id);
        this.qrCodeUrl = url;
        this.TSxx = "信息已生成";
      } catch (err) {
        this.TSxx = "订单生成失效";
        console.error("二维码生成失败", err);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../static/css/index.less";
@import "../static/css/GYcSS.less";
.imgxx {
  height: 80px;
}
.ulbox {
  height: calc(
    var(--real-vh, 1vh) * 100 - 50px - env(safe-area-inset-bottom) -
      env(safe-area-inset-top)
  );
  background: rgba(245, 245, 245, 1);
  padding: 10px;
  box-sizing: border-box;
  color: #4c4c4c;
  .LBul {
    background: #fff;
    margin-top: 10px;
    border-radius: 10px;
    padding: 10px;
  }
}

.topXX {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 0px auto;

  .top {
    font-size: 14px;
    color: rgb(255, 141, 26);
  }
}

.DI {
  position: fixed;
  z-index: 999;
  width: 90%;
  left: 50%;
  bottom: 5px;
  transform: translate(-50%, -5px);
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  background: rgba(245, 245, 245, 1);

  .DI_bottom {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: rgb(2, 117, 113);
    color: #fff;
    border-radius: 5px;
  }
}
.titletopXX {
  height: 45px;
}
.van-nav-bar {
  position: sticky;
  top: 0;
}
</style>